<template>
  <view class="content" :style="{ paddingTop: statusBarHeight + 'px' }">
    <uni-nav-bar title="采购报表" fixed :border="false" height="88rpx" background-color="#f7f7f7" left-icon="left"
      @clickLeft="onClickLeft"></uni-nav-bar>
    <view class="topTag">
      <view class="stateBox">
        <view>日期：</view>
        <uni-datetime-picker v-model="time" type="daterange" @change="maskClick" start-placeholder="开始"
          end-placeholder="结束" />
      </view>
    </view>
    <view class="topTag">
      <view class="stateBox">
        <view>类型：</view>
        <uni-data-select v-model="type" :localdata="rangeType" @change="changeType" :clear="false"></uni-data-select>
      </view>
      <view class="stateBox">
        <view>排序：</view>
        <uni-data-select v-model="filter" :localdata="rangeSort" @change="changeSort" :clear="false"></uni-data-select>
      </view>
    </view>
    <view class="uni-container" :style="{paddingBottom: safeAreaBottom  + 'px'}">
      <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据"
        style="overflow: scroll; box-sizing: border-box"
        :style="{ height: `calc(100vh - 318rpx - ${statusBarHeight}px)` }">
        <uni-tr>
          <uni-th width="50" align="center">序号</uni-th>
          <uni-th width="300" align="center">商品名称</uni-th>
          <uni-th width="100" align="center" v-if="type == '0'">规格</uni-th>
          <uni-th width="100" align="center" v-if="type != '1'">采购数量</uni-th>
          <uni-th width="100" align="center" v-if="type == '1'">采购重量(KG)</uni-th>
          <uni-th width="100" align="center" v-if="type == '0'">采退数量</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">{{ index + 1 }}</uni-td>
          <uni-td align="center">{{ item.commodityName }}</uni-td>
          <uni-td align="center"  v-if="type == '0'">{{ item.standard }}</uni-td>
          <uni-td align="center" v-if="type != '1'">{{ item.buyCount }}</uni-td>
          <uni-td align="center" v-if="type == '1'">{{ item.buyWeight }}</uni-td>
          <uni-td align="center" v-if="type == '0'">{{ item.returnCount }}</uni-td>
        </uni-tr>
      </uni-table>
      <view class="uni-pagination-box"><uni-pagination show-icon :page-size="page.pageSize" :current="page.pageNum"
          :total="page.total" @change="changePage" /></view>
    </view>
  </view>
</template>

<script>
import { reqPurchaseReport } from '@/apis/member.js'
export default {
  name: 'InventoryInfo',
  data() {
    return {
      time: [],
      shiftList: [], //
      rangeType: [
        { value: '0', text: '标品' },
        { value: '1', text: '非标品' },
        { value: '2', text: '自营' },
      ],
      rangeSort: [
        { value: '0', text: '采购数量从大到小' },
        { value: '1', text: '采购数量从小到大' }
      ],
      type: '0',
      filter: '',
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      tableData: [],
      maxDate: '',
      minDate: '',
      triggered: false, // 是否触发下拉刷新
      loading: false // 是否触发上拉加载
    }
  },
  onLoad() {
    this.reqPurchaseReport()
  },
  onShow() { },
  methods: {
    // 供应链
    async reqPurchaseReport() {
      const res = await reqPurchaseReport({ ...this.page, minDate: this.minDate, maxDate: this.maxDate, type: this.type, filter: this.filter })
      if (res.code === 200) {
        console.log('销售报表:', res.data)
        this.tableData = res.data.list
        this.page.total = res.data.total
        this.loading = false
      }
    },
    maskClick(e) {
      console.log('e', e, this.time)
      this.time = e
      this.minDate = this.time.length ? this.time[0] : ''
      this.maxDate = this.time.length ? this.time[1] : ''
      this.page.pageNum = 1
      this.tableData = []
      this.reqPurchaseReport()
    },
    changeType() {
      this.page.pageNum = 1
      this.tableData = []
      this.loading = true
      this.reqPurchaseReport()
    },
    changeSort() {
      this.page.pageNum = 1
      this.tableData = []
      this.loading = true
      this.reqPurchaseReport()
    },
    changePage(e) {
      console.log('e', e)
      this.page.pageNum = e.current
      this.tableData = []
      this.loading = true
      this.reqPurchaseReport()
    }
  }
}
</script>
<style>
page {
  background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.content {
  height: calc(100vh);
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 28rpx !important;
}

view {
  box-sizing: border-box;
}

.topTag {
  height: 100rpx;
  display: flex;
  justify-content: start;
  align-items: center;
  border-bottom: 1px solid #eee;
  margin-bottom: 10rpx;

  .stateBox {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 10rpx;
  }
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: scroll;

  .uni-pagination-box {
    height: 100rpx;
  }
}

.uni-table-tr {
  &:first-child {
    position: sticky;
    top: 0;
    background-color: #fff;
  }
}

.uni-table-th,
.uni-table-td {
  padding: 16rpx 10rpx;
}

.uni-table-td {
  line-height: 30rpx !important;
}

.uni-table-scroll {
  box-sizing: border-box;
}

.uni-group {
  display: flex;
  align-items: center;
}
</style>
